@tab-border-size: 1px;
@tab-border: @tab-border-size solid @tab-border-color;
@tab-max-width: @ui-size*22;
@tab-min-width: @ui-size*10; // icon + 5 characters
@tab-padding: @ui-padding/1.5;
@modified-icon-width: @ui-size;

.tab-bar {
  height: @ui-tab-height;
  box-shadow: inset 0 -1px 0 @tab-border-color;
  background: @tab-bar-background-color;
  overflow-x: auto;
  overflow-y: hidden;

  &::-webkit-scrollbar {
    display: none;
  }

  // Tab ----------------------

  .tab {
    position: relative;
    top: 0;
    max-width: @tab-max-width;
    min-width: @tab-min-width;
    height: @ui-tab-height;
    font-size: inherit;
    color: @tab-text-color;
    line-height: @ui-tab-height;
    padding: 0;
    margin: 0;


    // Background ----------------------

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: inherit;
      border-radius: @component-border-radius @component-border-radius 0 0;
      border: @tab-border;
      border-bottom-color: @tab-background-color-active;
      background-color: @tab-background-color-active;
      background-image: linear-gradient( hsla(0,0%,100,.02), hsla(0,0%,100,0) );
      background-clip: content-box;
      transition: opacity .8s;
      box-shadow:  0px 0px 15px 3px rgba(0,120,120,1);
      opacity: 0;
    }
    &[data-type="TextEditor"]::after {
      background-color: @tab-background-color-editor;
      border-bottom-color: @tab-background-color-editor;
    }
    &.active::after {
      opacity: 1;
      transition: opacity 1s;
    }


    // Title ----------------------

    .title {
      position: relative;
      z-index: 1;
      text-align: center;
      margin: 0 @tab-padding;
      text-overflow: clip;
      -webkit-mask: linear-gradient( to left, hsla(0,0%,0%,0), hsla(0,0%,0%,1) 1em) no-repeat;
    }
    &:hover .title {
      -webkit-mask-position: -@modified-icon-width 0;
    }


    // Close icon ----------------------

    .close-icon {
      top: 0;
      right: 0;
      z-index: 1;
      padding: 0 @tab-padding/1.25;
      height: @ui-tab-height;
      line-height: @ui-tab-height;
      text-align: center;
      transform: scale(0);
      transition: transform .8s;
      &:hover {
        opacity: .7;
      }
      &:active {
        opacity: .4;
      }
      &::before {
        font-size: inherit;
      }
    }
    &:hover .close-icon {
      transform: scale(1);
      transition-duration: .16s;
    }
  }


  // Tab sizing ----------------------

  .tab,
  .tab.active {
    flex: 1;
  }


  // keep tabs same size when active ----------------------

  .tab,
  .tab.active {
    padding-right: 0;
    .title {
      padding: 0;
    }
  }


  // Active ----------------------

  .tab.active {
    color: @tab-text-color-active;
    &[data-type="TextEditor"] {
      color: #00e600;
    }
  }

  // Tab seperator ----------------------

  .tab {
    border-width: 0 0 0 1px;
    border-image: linear-gradient(@tab-bar-background-color, @base-border-color 1em) 0 0 0 1 stretch;
    &:first-child {
      border-width: 0;
    }
  }
  .tab.active,
  .tab.active + .tab {
    border-image: linear-gradient(transparent, transparent) 0 0 0 1 stretch;
  }


  // Modified ----------------------
  .tab.modified {
    .close-icon {
      color: @text-color-info;
      border: none;
      border-bottom: @tab-border-size solid transparent;
    }
    &:not(:hover) .close-icon {
      right: 0;
      top: 0;
      width: initial;
      height: @ui-tab-height;
      border: none;
      border-bottom: @tab-border-size solid transparent;
      border-radius: 0;
      transform: scale(1);
      &::before {
        content: "\f052";
        display: inline-block;
      }
    }
  }


  // Dragging ----------------------

  .tab.is-dragging {
    .close-icon,
    &:before {
      visibility: hidden;
    }
    &::after {
      background: darken(@tab-background-color, 6%);
      border-color: transparent;
      opacity: .5;
    }
  }

  .placeholder {
    margin: 0;
    height: @ui-tab-height;
    background: @base-accent-color;
    pointer-events: none;
    &:after {
      top: @ui-tab-height/2;
      width: 10px;
      height: 10px;
      margin: -5px 0 0 0;
      border-radius: 0;
      border: 5px solid;
      border-color: transparent transparent transparent @base-accent-color;
      background: transparent;
    }

    &:last-child {
      margin-left: -2px;

      &:after {
        margin-left: -10px;
        border-color: transparent @base-accent-color transparent transparent;
      }
    }
  }
}


// Active pane marker --------------

.tab-bar .tab::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
  top: @tab-border-size;
  left: @tab-border-size;
  bottom: @tab-border-size;
  width: 2px;
  border-top-left-radius: inherit;
  border-radius: @component-border-radius 0;
  background: @base-accent-color;
  opacity: 0;
  transform: scaleY(0);
  transition: opacity .6s, transform .6s cubic-bezier(.80, 0, .90, .53);

  .theme-ghoulish-ui & {
    left: 0;
  }
}

atom-pane.active .tab.active:before {
  opacity: 1;
  transform: scaleY(1);
  transition: opacity .36s, transform .92s cubic-bezier(0,.6,.2,1);
}
